<template>
    <div id="main">
        <div class="btn">
            <el-button type="primary" @click="print">打印准考证</el-button>
        </div>
        <div id="myCvs">
            <div class="myCvs">
                <div class="title">江西省2021年度考试录用公务员笔试</div>
                <div class="zkz">准考证</div>
                <div class="formData">
                    <div class="left">
                        <div class="half">姓名:<el-input v-model="formData.name" readonly></el-input></div>
                        <div class="half">报名编号:<el-input v-model="formData.regNum" readonly></el-input></div>
                        <div class="all">身份证号:<el-input v-model="formData.idNum" readonly></el-input></div>
                        <div class="all">报考职位:<el-input v-model="formData.position" readonly></el-input></div>
                        <div class="all">考点名称:<el-input v-model="formData.exaPlaceName" readonly></el-input></div>
                        <div class="all">考点地址:<el-input v-model="formData.exaPlace" readonly></el-input></div>
                    </div>
                    <div class="right">
                        <!-- <img src="../../../../assets/logo.png" style="width:100%"> -->
                        <!-- <div class="img"><i class="el-icon-plus" /></div> -->
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:100%;height:100%">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="project" label="考试科目" width="160"> </el-table-column>
                        <el-table-column prop="exameNum" label="准考证号" width="120"> </el-table-column>
                        <el-table-column prop="hall" label="考场" width="80"> </el-table-column>
                        <el-table-column prop="locate" label="座次" width="80"> </el-table-column>
                        <el-table-column prop="start" label="开始时间"> </el-table-column>
                        <el-table-column prop="end" label="结束时间"> </el-table-column>
                    </el-table>
                </div>
                <div class="tips">
                    <p style="text-align: center; font-weight: 600">考场规则（要点）</p>
                    <p>1、应试人员（考生，以下统称应试人员），只能凭准考证和有效身份证经监考人员查验无误后入场。</p>
                    <p style="font-weight: 600">
                        2、应试人员开考前30分钟可进入考场；开考30分钟后不得入场；走错考场的必须回原考场考试，否则成绩无效；考试结束后方可交卷，经监考人同意后方可离场。
                    </p>
                    <p>3、应试人员应自备橡皮擦、2B铅笔、黑色字迹的钢笔或签字笔。</p>
                    <p>4、应试人员不得将各种有计算、存储、编程、查询等功能的电子用品以及通信（通讯）工具（手机）、书籍、资料等物品带入座位。</p>
                    <p>5、应试人员严禁将答题卡（纸）、试卷、草稿纸等带出考场。</p>
                    <p style="font-weight: 600">
                        6、应试人员必须使用规定用笔再答题卡（纸）或试卷规定区域内正确填写名字、填（涂）准考证号、（科目代码、试卷代码）、答案等信息，否则成绩按零分处理。
                    </p>
                    <p>7、应试人员应在考试前一天熟悉考场地址和交通路线。</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    project: '行政职业能力测验',
                    exameNum: '12315',
                    hall: '1',
                    locate: '1',
                    start: '2021-05-05 09:00',
                    end: '2021-05-05 14:00'
                },
                { project: '申论', exameNum: '12315', hall: '1', locate: '1', start: '2021-05-15 09:00', end: '2021-05-15 14:00' }
            ],
            imageUrl: '',
            formData: {
                name: '张三',
                regNum: '123123123123123123123123123',
                idNum: '123123123123123123123123123',
                position: '科员',
                exaPlaceName: '江西省南昌市西湖区',
                exaPlace: '南昌市'
            }
        };
    },
    methods: {
        print() {
            if (!this.imageUrl) {
                this.$message.warning('请先上传头像')
                return
            }
             this.printPaper()
        },
        // 检查是否上传头像
        printPaper() {
            let mainNode = document.getElementById('main')
            let bodyNode = document.getElementById('myCvs')
            setTimeout(() => {
                this.$shot(bodyNode,{y:50}).then((canvas) => {
                    // console.log(canvas);
                    // mainNode.after(canvas)
                    // return
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = (contentWidth / 592.28) * 841.89;
                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    //页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28;
                    var imgHeight = (592.28 / contentWidth) * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    var pdf = new this.$pdf('', 'pt', 'a4');

                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 10, -60, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save('test');
                });
            }, 500);
        },
        covertImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        },
        cropImage(image, scoped) {
            var workCan = document.createElement("canvas"); // 创建一个画布
            workCan.width= Math.floor(scoped.width);  // 将画布分辨率设置为裁剪的图像尺寸
            workCan.height= Math.floor(scoped.height);
            var ctx = workCan.getContext("2d");    // 获取2D渲染界面
            ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // 绘制图像偏移以将其正确放置在裁剪区域上
            image.src= workCan.toDataURL();       // 将图像源设置为画布作为数据URL
            return image;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = (e) => {
                this.imageUrl = e.target.result;
                // `<img src=${e.target.result} ></img>`;
            };
            return isJPG && isLt2M;
        }
    }
};
</script>

<style scoped>
/* #main{
    height: 1200px;
} */
#myCvs{
    height: 1050px;
}
.myCvs {
    width: 82%;
    height: 37vw;
    margin: 0 auto;
    color:#000000;
    background-color: #ffffff;
    border: 1px solid #000000;
}
#main .btn{
    width: 100%;
    text-align: right;
    margin: 5px;
}
.myCvs .title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-top: 1vw;
}
.myCvs .zkz {
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-top: 1vw;
}
.myCvs .formData {
    width: 100%;
    padding: 0.5vw;
    display: flex;
    justify-content: center;
    align-content: center;
}
.myCvs .tips {
    text-indent: 2vw;
    margin-bottom: 3vw;
    padding: 0.5vw;
}
.myCvs .table {
    width: 98%;
    margin: 10px auto;
}
.myCvs /deep/ .el-input__inner {
    color: #000000;
    font-weight: 600;
}


.el-table /deep/ th, .el-table /deep/ tr {
    color: black;
    font-weight: 600;
}
.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: black; 
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: black;
}
.el-table /deep/ td, .el-table /deep/ th.is-leaf {
    border-bottom: 1px solid black;
}
.table /deep/ .el-table--border th,.table /deep/ .el-table--border td{
    border-right: 1px solid #000;
}

.myCvs .table /deep/ .el-table th {
    background-color: rgb(255, 255, 255, 0) !important;
}
.myCvs .formData .left {
    width: 78%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.myCvs .formData .right {
    width: 20%;
    height: 8.5vw;
    margin-right: 1vw;
}
.myCvs .formData .right .avatar-uploader ::v-deep .el-upload{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
}
.myCvs .formData .right .img {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
}
.myCvs .formData .left .half {
    width: 48%;
    margin: 1px 0;
}
.myCvs .formData .left .all {
    width: 98%;
    margin: 1px 0;
}
.myCvs .formData /deep/ .el-input .el-input__inner {
    border: 0px solid !important;
}
/* .myCvs .formData /deep/ .el-input .el-input__inner:focus,.myCvs .formData /deep/ .el-input .el-input__inner:hover {
    border: 1px solid #4a90e2 !important;
} */
.myCvs .formData .left .half .el-input {
    width: 70%;
}
.myCvs .formData .left .all .el-input {
    width: 87%;
}
</style>